<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<html:header title="零售收银-选择客户">
    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">

    <style>
        .layui-input{
            font-size: 16px;
        }
        .layui-input:focus{border-color:#4287cf!important}





        .item-title{
            height: 51px;line-height: 51px;display: inline-block;
            font-size: 16px;font-weight: bold;text-align: left;
            color: #666;
        }

        .item-content{
            border-bottom:1px solid #dddddd;
            width: 660px;margin-left: 20px;
        }

        .item-content:hover{
            cursor: pointer;
        }

        .item-content div{
            height: 51px;line-height: 51px;display: inline-block;overflow: hidden;
            font-size: 14px;
            color: #666;
        }
    </style>

    <script>
        jQuery(function () {
            $('[name="search"]').focus();
            $('[name="search"]').val("${search}");
            flowLoad("${search}");
            $('[name="search"]').bind("input propertychange",function(event){
                flowLoad($(this).val());
            });


            window.addEventListener("keydown", function(e) {

                if (e.keyCode == 0x1B){
                    closeAllDialog();
                } else if (e.keyCode == 38){
                    up();
                    e.preventDefault();
                } else if (e.keyCode == 40){
                    down();
                    e.preventDefault();
                } else if (e.keyCode == 0x0D){
                    enter();
                }

            }, false);

            $(".esc").click(function () {
                closeAllDialog();
            });

            $(".enter").click(function () {
                enter();
            });



        });


        function flowLoad(search) {
            max_data_length = 0;
            $("#listBody").empty();
            layui.use(['laytpl','flow'], function () {
                let $ = layui.jquery,
                    laytpl = layui.laytpl;
                let flow = layui.flow;
                flow.load({
                    elem: '#listBody' //流加载容器
                    ,isAuto: true
                    ,done: function(page, next){ //执行下一页的回调
                        get("${baseUrl}custom/custom/getList?status=1&page="+page+"&limit=10&search="+search, function (res) {
                            if (res.code == 0) {
                                let pages = res.count%10==0 ? res.count/10 : res.count/10+1;

                                let list = [];
                                $.each(res.data, function (i,d) {
                                    d.index = i+1;
                                    list.push(getItemTr(d));
                                });

                                max_data_length += list.length;
                                next(list.join(''), page < pages);
                                if (current_selected_index==0) {
                                    current_selected_index = 1;
                                    selectedLine(current_selected_index);
                                }

                                $("#item-number").html(res.count);
                            }
                        });
                    }
                });
            });
        }

        function clickItemTr(index) {
            current_selected_index = index;
            selectedLine(current_selected_index);
        }

        function getItemTr(item){
            let child = '<div class="item-content" onclick="clickItemTr('+item.index+');" index="'+item.index+'" data=\''+JSON.stringify(item)+'\'>\n' +
                '            <div style="width: 44px;text-align: center">'+item.index+'</div>\n'+
                '<div style="width: 140px;text-align: center">'+item.no+'</div>\n' +
                '            <div style="width: 159px;text-align: left">'+item.name+'</div>\n' +
                '            <div style="width: 103px;text-align: center">'+genString(item.phone)+'</div>\n' +
                '            <div style="width: 72px;text-align: center">'+genString(item.contacts)+'</div>\n' +
                '            <div style="width: 88px;text-align: center">'+genString(item.remark)+'</div>'+
                '        </div>';
            return child;
        }


        let current_selected_index = 0;
        let max_data_length = 0;
        function up() {

            focusUpDown();
            if (current_selected_index<=1){
                current_selected_index=1;
            } else {
                current_selected_index--;
            }

            selectedLine(current_selected_index);
        }

        function down() {

            focusUpDown();
            if (current_selected_index>=max_data_length){
                current_selected_index=max_data_length;
                let $more = $(".layui-flow-more a");
                if ($more != undefined) {
                    $more.click();
                }
            } else {
                current_selected_index++;
            }
            selectedLine(current_selected_index);
        }

        function enter() {
            let $this = $(".item-content[index='" + current_selected_index + "']");
            let vo = JSON.parse($this.attr("data"));

            window.parent.getSelectCustom(vo);
            closeAllDialog();
        }

        function focusUpDown() {
            $(window).focus();
            $('[name="search"]').focus();
            $("#listBody").focus();
        }

        function closeAllDialog() {
            window.parent.closeAllDialog();
        }

        function selectedLine(index) {
            let $parent = $("#listBody");

            $(".item-content").css("background-color","#ffffff");
            $(".item-content[index='" + index + "']").css("background-color","#ffeeb9");

            let $this = $(".item-content[index='" + index + "']");
            $parent.animate({
                scrollTop: $this.offset().top-$this.height() - $parent.offset().top + $parent.scrollTop()
            },1);
        }

    </script>
</html:header>
<body style="margin:0;background-color: #F8F8F8;width: 700px;">

<div style="width: 660px;height:50px;padding-left: 20px;padding-top:10px;position: relative">
    <input class="layui-input" name="search" placeholder="搜索编号、名称、联系信息、备注"  autocomplete="off" style="padding-left: 40px;">
    <div style="position: absolute;top: 10px;left:30px;height: 38px;line-height: 38px;">
        <i class="layui-icon layui-icon-search"></i>
    </div>
</div>
<div style="width: 100%;height:351px;background-color: #FFFFFF;border-top: 1px solid #dddddd; border-bottom:1px solid #dddddd; ">
    <div style="width: 660px;margin-left: 20px;border-bottom: 1px solid #dddddd">
        <div class="item-title" style="width: 44px;text-align: center">序号</div>
        <div class="item-title" style="width: 140px;text-align: center">客户编号</div>
        <div class="item-title" style="width: 159px;text-align: left">客户名称</div>
        <div class="item-title" style="width: 103px;text-align: center">联系电话</div>
        <div class="item-title" style="width: 72px;text-align: center">联系人</div>
        <div class="item-title" style="width: 88px;text-align: center">备注</div>
    </div>
    <div id="listBody" style="height: 295px;overflow-y:scroll">
    </div>


</div>

<div style="overflow: hidden;height: 60px;line-height: 60px;">
    <div style="float: left;padding-left: 20px;font-size: 18px;color: #666;">
        匹配到<span id="item-number" style="font-weight: bold;color: #FFB800;padding-left: 12px;padding-right: 12px;">12</span>个客户
    </div>

    <div style="float: right;padding-right: 20px;">
        <button class="layui-btn layui-btn-normal enter">确认选择(Enter)</button>
        <button class="layui-btn layui-btn-primary esc">取消(Esc)</button>
    </div>
</div>


</body>

</html>